// uno.config.ts
import {
    type Preset,
    defineConfig,
    presetUno,
    presetAttributify,
    presetIcons,
    transformerDirectives,
    transformerVariantGroup,
} from 'unocss'

import { presetApplet, presetRemRpx, transformerAttributify } from 'unocss-applet'

// @see https://unocss.dev/presets/legacy-compat
// import { presetLegacyCompat } from '@unocss/preset-legacy-compat'

const isMp = process.env?.UNI_PLATFORM?.startsWith('mp') ?? false

const presets: Preset[] = []
if (isMp) {
    // 使用小程序预设
    presets.push(presetApplet(), presetRemRpx())
} else {
    presets.push(
        // 非小程序用官方预设
        presetUno(),
        // 支持css class属性化
        presetAttributify(),
    )
}
export default defineConfig({
    presets: [
        ...presets,
        // 支持图标，需要搭配图标库，eg: @iconify-json/carbon, 使用 `<button class="i-carbon-sun dark:i-carbon-moon" />`
        presetIcons({
            scale: 1.2,
            warn: true,
            extraProperties: {
                display: 'inline-block',
                'vertical-align': 'middle',
            },
        }),
        // 将颜色函数 (rgb()和hsl()) 从空格分隔转换为逗号分隔，更好的兼容性app端，example：
        // `rgb(255 0 0)` -> `rgb(255, 0, 0)`
        // `rgba(255 0 0 / 0.5)` -> `rgba(255, 0, 0, 0.5)`
        // 与群友的正常写法冲突，先去掉！（2024-05-25）
        // presetLegacyCompat({
        //   commaStyleColorFunction: true,
        // }) as Preset,
    ],
    /**
     * 自定义快捷语句
     * @see https://github.com/unocss/unocss#shortcuts
     */
    shortcuts: [
        ['center', 'flex justify-center items-center'],
        ['align', 'flex justify-center items-center'],
    ],
    transformers: [
        // 启用 @apply 功能
        transformerDirectives(),
        // 启用 () 分组功能
        // 支持css class组合，eg: `<div class="hover:(bg-gray-400 font-medium) font-(light mono)">测试 unocss</div>`
        transformerVariantGroup(),
        // Don't change the following order
        transformerAttributify({
            // 解决与第三方框架样式冲突问题
            prefixedOnly: true,
            prefix: 'fg',
        }),
    ],
    rules: [
        [
            'p-safe',
            {
                padding:
                    'env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)',
            },
        ],
        ['pt-safe', { 'padding-top': 'env(safe-area-inset-top)' }],
        ['pb-safe', { 'padding-bottom': 'env(safe-area-inset-bottom)' }],
    ],
})

/**
 * 最终这一套组合下来会得到：
 * mp 里面：mt-4 => margin-top: 32rpx  == 16px
 * h5 里面：mt-4 => margin-top: 1rem == 16px
 *
 * 如果是传统方式写样式，则推荐设计稿设置为 750，这样设计稿1px，代码写1rpx。
 * rpx是响应式的，可以让不同设备的屏幕显示效果保持一致。
 */
